// @ts-nocheck
import {useState, useRef} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {Button, message, Spin, Tag, Divider, Popconfirm as Confirm} from 'antd'
import {DownloadOutlined, ImportOutlined, PlusOutlined, QuestionCircleOutlined} from '@ant-design/icons'
import ProTable from '@ant-design/pro-table'
import CreateModify from './extra/createModify'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import {downloadHost, importHost, getHosts, delHost} from "@/services/host";
import ExcelData from "@/components/Common/ExcelData";

const Index = () => {
  const init = useModel('@@initialState');
  const {currentUser} = init.initialState
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState({})
  const [mode, setMode] = useState('create')
  const [importVisible, setImport] = useState(false)
  const [loading,setLoading] = useState(false)
  const keys = ['OLT名称', '系统名称', 'IP', '端口', '账号', '密码', '上联端口', 'OLT类型', '线路模板GPON', '业务模板GPON', '线路模板EPON', '业务模板EPON', '业务外层', '业务内层']
  const actionRef = useRef()
  const columns = [
    {
      dataIndex: 'olt_name',
      title: '主机名称'
    },
    {
      dataIndex: 'olt_system_name',
      title: '系统名称',
      hideInSearch: true,
    },
    {
      dataIndex: 'olt_ip',
      title: '主机地址',
      hideInSearch: true,
    },
    {
      dataIndex: 'olt_port',
      title: '主机端口',
      hideInSearch: true,
    },
    {
      dataIndex: 'up_port',
      title: '上联端口',
      hideInSearch: true,
    },
    {
      dataIndex: 'host_status',
      title: '主机状态',
      hideInSearch: true,
      render: (text) => text === '正常' ? <Tag color="#87d068">正常</Tag> : <Tag color="#cd201f">宕机</Tag>
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 200,
      render: (_: any, rowData: any) => [
        <Access key={'1'} accessible={authority('60', currentUser.operation)}>
          <a onClick={() => {
            setMode('modify')
            setData(rowData)
            setVisible(true)
          }}>修改</a>
        </Access>,
        <Divider key={'2'} type="vertical"/>,
        <Access key={'3'} accessible={authority('61', currentUser.operation)}>
          <Confirm
            title="确认删除吗?"
            okText="删除"
            icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
            onConfirm={() => delHost({oltId: rowData.olt_id}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                actionRef.current.reload()
              } else {
                message.error(res.message).then()
              }
            })}
            cancelText="取消"
          >
            <a>
              删除
            </a>
          </Confirm>
        </Access>

      ]
    }

  ]
  const handleImport = (e) => {
    console.log(JSON.stringify(e))
    setLoading(true)
    importHost({list: e}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        setLoading(false)
        setImport(false)
        actionRef.current.reload()
      } else {
        setLoading(false)
        message.error('导入失败!').then()
      }
    })

  }

  const download = () => {
    downloadHost().then(res => {
      const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob)
      a.download = decodeURIComponent(`主机表样例.xls`);
      document.body.appendChild(a);
      a.click();
      message.success('下载成功').then()
    })
  }
  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={(params) => getHosts({...params})}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('57', currentUser.operation)}>
            <Button key="button" icon={<DownloadOutlined/>} type="primary" onClick={() => download()}>
              下载主机表样例
            </Button>
          </Access>,
          <Access key={'2'} accessible={authority('58', currentUser.operation)}>
            <Button key="button" icon={<ImportOutlined/>} type="primary" onClick={() => {
              setImport(true)
            }}>
              导入主机表
            </Button>
          </Access>,
          <Access key={'3'} accessible={authority('8', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setMode('create');
              setVisible(true)
            }}>
              新建主机
            </Button>
          </Access>
        ]}
      />
      <CreateModify
        mode={mode}
        visible={visible}
        data={data}
        onClose={() => setVisible(false)}
        onOk={() => {
          setVisible(false);
          actionRef.current.reload()
        }}
      />
      <Spin tip="导入中..." spinning={loading}>
        <ExcelData
          keyList={keys}
          visible={importVisible}
          onClose={() => setImport(false)}
          onOk={(e) => handleImport(e)}
        />
      </Spin>

    </PageHeaderWrapper>
  );
};

export default Index;
